<template>
    <div class="userinfomenu">
    </div>
    
    <!-- 我的项目区域 - 整合重复结构 -->
    <div v-for="(section, index) in projectSections" :key="index" class="myItem">
        <p>
            <span>{{section.title}}</span>
            <span @click="loadMore(section.type)">查看更多</span>
        </p>
        <div class="myItemall">
            <el-card v-for="(item, i) in section.data" :key="i" :style="section.cardStyle">
                <h2 v-if="section.type === 'first'">{{item.name}}</h2>
                <h3 v-if="section.type === 'first'">{{item.name2}}</h3>
                <img v-if="section.type === 'first'" :src="item.img" alt="" style="width: 50px;height: 50px;">
                <span v-if="section.type === 'first'">等{{item.nums}}人</span>
                
                <h6 v-if="section.type === 'second'">{{item.p1}}</h6>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 优化数据结构，整合项目数据
const projectData = {
  first: {
    title: '我的项目',
    fullData: [
      {name:'企业级产品', name2:'Ilovie', img:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', nums:35},
      {name:'数据分析平台', name2:'DataVision', img:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', nums:28},
      {name:'人工智能助手', name2:'AIHelper', img:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', nums:42},
      {name:'区块链应用', name2:'BlockChainPro', img:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', nums:19},
      {name:'云计算管理系统', name2:'CloudManager', img:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', nums:31},
      {name:'移动应用开发', name2:'MobileDev', img:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', nums:24}
    ],
    cardStyle: { width: '180px' },
    displayedData: ref([])
  },
  second: {
    title: '项目简介',
    fullData: [
      {p1:'【内容简介】：企业级产品解决方案，提供完整的业务流程管理与数据分析功能'},
      {p1:'【内容简介】：高级数据分析平台，支持多维度数据可视化与智能预测分析'},
      {p1:'【内容简介】：人工智能助手系统，集成自然语言处理与机器学习算法'},
      {p1:'【内容简介】：区块链应用开发框架，支持快速构建去中心化应用'},
      {p1:'【内容简介】：云计算资源管理系统，实现跨平台资源调度与监控'},
      {p1:'【内容简介】：移动应用开发平台，支持多端同步开发与部署'}
    ],
    cardStyle: { width: '300px' },
    displayedData: ref([])
  }
}

// 项目 sections 配置
const projectSections = ref([
  { ...projectData.first, type: 'first', data: projectData.first.displayedData },
  { ...projectData.second, type: 'second', data: projectData.second.displayedData }
])

// 组件挂载时初始化显示数据
onMounted(() => {
  loadInitialData()
})

// 加载初始数据（前3条）
const loadInitialData = () => {
  projectData.first.displayedData.value = projectData.first.fullData.slice(0, 3)
  projectData.second.displayedData.value = projectData.second.fullData.slice(0, 3)
}

// 加载更多数据
const loadMore = (type) => {
  if (type === 'first') {
    projectData.first.displayedData.value = projectData.first.fullData
  } else {
    projectData.second.displayedData.value = projectData.second.fullData
  }
}
</script>

<style lang="scss" scoped>
.userinfomenu {
    width: 100%;
    height: 200px;
    background: skyblue;
}

.myItem {
    width: 100%;
    background: yellow;
    padding: 20px 0;
    
    .myItemall {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 20px; /* 优化卡片间距 */
    }
    
    .el-card {
        margin: 0; /* 移除冗余margin */
    }
}
</style>